<template>
  <Tabs v-model="menuKey" @change="handleChange" :options="menuOptions" />
</template>

<script setup lang="ts">
import { MenuOption } from '@/components/Tabs.vue'

const handleChange = () => {
  //   console.log(menuKey.value)
}

const menuKey = ref('Home')
const menuOptions = ref<Array<MenuOption>>([
  {
    key: 'home',
    title: '首页',
    checked: false,
    link: 'Home'
  },
  {
    key: 'news',
    title: '新闻中心',
    checked: false,
    link: 'News'
  },
  {
    key: 'about',
    title: '关于',
    checked: false,
    link: 'About'
  },
  {
    key: 'contact',
    title: '联系我们',
    checked: true,
    link: 'Contact',
    children: [
      {
        key: 'contact',
        title: '联系我们',
        checked: false,
        link: 'Contact'
      },
      {
        key: 'recruit',
        title: '招纳贤士',
        checked: false,
        link: 'Recruit'
      }
    ]
  }
])
</script>

<style scoped lang="scss"></style>
